<script setup lang="ts">
import { addOrDeleteAttr, deleteAttrByAttrId, getAttrList } from '@/api/attr'
import CategoryHeader from '@/components/category/CategoryHeader.vue'
import { ElMessage } from 'element-plus'
import { nextTick, ref } from 'vue'

let categoryId: null = null

// 加载属性列表
const loadAttrData = async (cateId: null) => {
  formData.value.categoryId = cateId
  const result = await getAttrList(cateId)
  if (result.code == 200) {
    tableData.value = result.data
    categoryId = cateId
  } else {
    ElMessage.error('查询品牌数据失败')
  }
}
const tableData = ref([])

const showAddDialog = ref(false)
const dialogTitle = ref('')

const hideOrShowDialog = (titile) => {
  dialogTitle.value = titile
  showAddDialog.value = !showAddDialog.value
}

const cancelDialog = () => {
  showAddDialog.value = !showAddDialog.value
}

interface AttrValueData {
  id?: null
  name: string
  attrId?: null
  deleted?: boolean
}
const formData = ref({
  id: null,
  categoryId: null,
  name: '',
  attrValueList: [] as AttrValueData[]
})

//编辑属性
const eidtAttr = (row: any) => {
  formData.value.id = row.id
  formData.value.categoryId = row.categoryId
  formData.value.name = row.name
  formData.value.attrValueList = row.attrValueDTOList
  dialogTitle.value = '修改属性'
  showAddDialog.value = true
  console.log(formData.value)
}

// 确认提交
const confim = async () => {
  if (categoryId) {
    formData.value.categoryId = categoryId
  }
  console.log('mem.value11:', mem.value)
  const result = await addOrDeleteAttr(formData.value, mem.value)
  if (result.code == 200) {
    ElMessage.success('操作成功')
    showAddDialog.value = false
    loadAttrData(categoryId)
  } else {
    ElMessage.error('操作失败')
  }
}

// 属性值相关
const InputRef = ref()
const inputVisible = ref(false)
const inputValue = ref('')

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}
// 删除数组中的属性值
const mem = ref<AttrValueData[]>([])
const handleClose = (tag: string) => {
  //从formData.value.attrValueList中找到tag对应的数据，然后将其deleted置为1
  formData.value.attrValueList.forEach((item) => {
    if (item.name == tag) {
      item.deleted = true
      mem.value.push(item)
      //从formData.value.attrValueList中删除该数据
      formData.value.attrValueList.splice(formData.value.attrValueList.indexOf(item), 1)
    }
  })
}
// 添加属性值
const handleInputConfirm = () => {
  if (inputValue.value) {
    formData.value.attrValueList.push({
      name: inputValue.value,
      attrId: formData.value.id
    })
  }
  inputVisible.value = false
  inputValue.value = ''
}

const deleteAttr = async (attrId) => {
  if (attrId) {
    formData.value.id = attrId
    const result = await deleteAttrByAttrId(attrId)
    if (result.code == 200) {
      ElMessage.success('操作成功')
      loadAttrData(categoryId)
    } else {
      ElMessage.error('操作失败')
    }
  }
}
</script>

<template>
  <div>
    <!-- 分类头 -->
    <CategoryHeader @sendCategoryId="loadAttrData"></CategoryHeader>
    <!-- 属性列表 -->
    <!-- 按钮区域 -->
    <div class="button_header">
      <el-button type="primary" :icon="Edit" @click="hideOrShowDialog('添加属性')"
        >添加属性</el-button
      >
      <el-button type="danger" :icon="Edit" @click="deleteBrandBatch">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <el-table border :data="tableData">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="属性" prop="name"></el-table-column>
      <el-table-column label="属性值">
        <template #default="scope">
          <el-tag
            :key="item.id"
            style="margin: 0 5px 0 0"
            type="primary"
            v-for="item in scope.row.attrValueDTOList"
            >{{ item.name }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="eidtAttr(scope.row)">编辑</el-button>
          <el-button type="danger" :icon="Edit" @click="deleteAttr(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 添加dialog -->
  <el-dialog v-model="showAddDialog" :title="dialogTitle" width="500" :before-close="handleClose">
    <!-- 添加form表单，其中包括一个 -->
    <el-form>
      <el-form-item label="属性名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="属性值">
        <div class="attr_value_add">
          <el-tag
            v-for="tag in formData.attrValueList.map((item) => item.name)"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
            style="margin: 5px 5px 5px 0; width: 60px; height: 24px"
          >
            {{ tag }}
          </el-tag>
          <el-input
            style="width: 60px; height: 24px"
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="input_new_tag"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else size="small" @click="showInput"> + New Tag </el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDialog">Cancel</el-button>
        <el-button type="primary" @click="confim"> Confirm </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.attr_value_add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.button_header {
  margin: 10px 0;
}
</style>
